<template>
	<!-- 标题部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/错误.png" @click="gotoIndex"></image>
		<view class="titlebox-centertext">转链工具</view>
		<view class="titlebox-clear">清空</view>
	</view>


	<!-- 工具部分 -->
	<view class="tool">
		<view class="tool-toolbox">
			<view class="tool-toolbox-textimg">
				<image class="tool-toolbox-textimg-img" src="../../static/链接.png"></image>
				<view class="tool-toolbox-textimg-text">请粘贴待转链接</view>
			</view>

			<view class="tool-toolbox-textareatextbox">
				<textarea placeholder-style="color:#bababa" placeholder="复制链接到这里..."
					class="tool-toolbox-textareatextbox-textbox"></textarea>
			</view>

			<view class="tool-toolbox-textbox">
				<text class="tool-toolbox-textbox-text1">请粘贴您需要转化的</text>
				<text class="tool-toolbox-textbox-text2">文案/链接和淘口令</text>
				<text class="tool-toolbox-textbox-text1">到输入框中，支持淘宝/京东/拼多多/抖音/商品的</text>
				<text class="tool-toolbox-textbox-text2">原始链接和外部链接以及会场链接。</text>
			</view>

			<button class="paste">一键粘贴</button>
			<button class="BatchConversion">批量转化成我的链接</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	/* 标题部分 */
	.titlebox {
		display: flex;
		padding: 2%;
		align-items: center;
		background: rgb(241, 224, 84);
	}

	.titlebox-backimg {
		width: 25px;
		height: 25px;
		display: block;
		margin-right: 5px;
	}

	.titlebox-centertext {
		flex: 1;
		text-align: left;
		font-size: 14px;
	}

	.titlebox-clear {
		background: radial-gradient(circle at center, rgb(241, 224, 84), white);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 1% 5%;
		border-radius: 20px;
	}


	/* 工具部分 */
	.tool {
		padding: 2%;
		background-image: linear-gradient(to bottom, rgb(241, 224, 84), rgb(246, 246, 246) 23% 100%);
	}

	.tool-toolbox {
		padding: 2%;
		background-color: white;
		border-radius: 10px;
	}

	.tool-toolbox-textimg {
		display: flex;
		align-items: center;
		padding: 2% 0%;
		border-bottom: 1px solid #eee;
	}

	.tool-toolbox-textimg-img {
		width: 20px;
		height: 20px;
		display: block;
		margin-right: 5px;
	}

	.tool-toolbox-textimg-text {
		font-size: 15px;
	}

	.tool-toolbox-textareatextbox {
		padding: 2%;
	}

	.tool-toolbox-textareatextbox-textbox {}

	.tool-toolbox-textbox {
		margin-bottom: 10px;
		padding: 2%;
	}

	.tool-toolbox-textbox-text1 {
		font-size: 13px;
		color: #bababa;
	}

	.tool-toolbox-textbox-text2 {
		color: black;
		font-size: 13px;
	}

	.paste {
		background: #f6f6f6;
		border-radius: 30px;
		margin-bottom: 10px;
		font-size: 15px;
	}

	.BatchConversion {
		background: rgb(241, 224, 84);
		border-radius: 30px;
		margin-bottom: 10px;
		font-size: 15px;
	}
</style>
